<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>注册</title>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/api.css" /> -->

    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <style>
        body {
            background-color: #fff;
        }

        #vm {
            overflow: hidden;
        }

        .telephone {
            position: relative;
        }

        .code,
        .code1 {
            position: absolute;
            right: 5px;
            top: 19px;
            text-align: right;
            color: #EA5717;
            font-size: 14px;
            width: 80px;
        }

        /*.codeactive {
            color: #EA5717;
        }*/

        span {
            font-size: 12px;
            color: #333;
        }

        .password-fourth {
            margin-top: 50px;
            background: #ea5413;
            border-radius: 8px;
            height: 34px;
            text-align: center;
            line-height: 34px;
            color: #fff;
            font-size: 15px;
        }

        .xieding {
            color: #EA5717;
        }

        input {
            font-size: 14px;
        }

        .fourth {
            margin-top: 40px !important;
            border-radius: 8px !important;
            height: 34px !important;
            text-align: center !important;
            line-height: 34px !important;
            color: #fff !important;
            font-size: 15px !important;
            background: #DAD9D9;
            width: 100%;
            border: none;
        }

        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <div id="vm">
        <div class="big-box">
            <div class="content">
                <div class="telephone">
                    <span onclick="Openphone()">+{{guojianumber}}<img src="../../image/login/downward.png" class="downward"></span>
                    <input type="text" placeholder="请输入手机号" style="text-align:left;position:absolute;bottom:1px;left:70px" v-model="mobile" @focus="jiaodian()" @blur="shijiaodian()" v-on:input="mobileinput">
                    <img src="../../image/login/delete.png" class="delete" v-if="isshowdelete" @click="qingchu()">
                </div>
                <div class="telephone">
                    验证码
                    <input type="text" placeholder="短信验证码" style="text-align:left;position:absolute;bottom:1px;left:70px" v-model="msg" v-on:input="msginput">
                    <input type="button" value="获取验证码" class="code" v-on:click="countdown();" id="dao" v-if="getcount==0">
                    <img src="../../image/login/return.png" alt="" class="eyeclose chongfa" style="width:17px;" @click="chongfamethod()" v-else-if="getcount==1">
                    <!-- @click="chongfamethod()" -->
                    <input type="button" value="59s" class="daojishi2 codeactive hide" @click="countdown()" id="dao1">
                    <!-- v-else-if="getcount==2" -->

                </div>
                <div class="telephone">
                    密码&emsp;&emsp;<span v-if="dianjiflag">
                    <input type="password" placeholder="请输入6-16位密码" class="text" v-model="password" style="margin-left:12px" v-on:input="addinput">
                    <img src="../../image/login/eyeclose.png" class="eyeclose"  @click="transform()">
                  </span>
                    <span v-else>
                    <input type="text" placeholder="请输入6-16位密码" class="text" v-model="password"  v-on:input="addinput">
                    <img src="../../image/login/eye.png" class="eye"  @click="transforms()">
                  </span>
                </div>
                <button class="fourth" @click="submit()" disabled v-if="isbukedianji">注册并登录</button>
                <button class="fourth" @click="submit()" v-else>注册并登录</button>
                <div class="agree" onclick="yonghuxieyi()">注册及代表同意<span class="xieding">《用户协议》</span></div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/login.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript" src="../../script/jiguang.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vm',
        data: {
            dianjiflag: true,
            mobile: '',
            password: '',
            msg: '',
            guojianumber: '86',
            // guojianumber: '',
            mobile2: '',
            isshowdelete: false,
            isbukedianji: true,
            getcount: 0

        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                var header = $api.byId('aui-header');
                $api.fixStatusBar(header);
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
                api.addEventListener({
                    name: 'number'
                }, function(ret, err) {
                    if (ret) {
                        _this.guojianumber = ret.value.number
                    }
                });


            }
        },
        methods: {
            init: function() {
                var _this = this;
                // $('.chongfa').on('click',function() {
                //   _this.getcount=2;
                //   $('.code1').click();
                // })
            },
            addinput: function() {
                var _this = this;
                _this.password = _this.password.replace(/[^\w\/]/ig, '');
                _this.password = _this.password.substr(0, 16);
                if (this.mobile && this.msg && this.password) {
                    $('.fourth').addClass('fourthactive');
                    _this.isbukedianji = false;
                } else {
                    $('.fourth').removeClass('fourthactive');
                    _this.isbukedianji = true;
                }
            },
            mobileinput() {
                var _this = this;
                if (_this.mobile.length > 0) {
                    _this.isshowdelete = true;
                    $('.code').addClass('codeactive');

                } else {
                    _this.isshowdelete = false;
                    $('.code').removeClass('codeactive');

                }
                if (this.mobile && this.msg && this.password) {
                    $('.fourth').addClass('fourthactive');
                    _this.isbukedianji = false;
                } else {
                    $('.fourth').removeClass('fourthactive');
                    _this.isbukedianji = true;
                }
            },
            msginput() {
                this.msg = this.msg.substr(0, 4);

                if (this.mobile && this.msg && this.password) {
                    $('.fourth').addClass('fourthactive');
                    this.isbukedianji = false;
                } else {
                    $('.fourth').removeClass('fourthactive');
                    this.isbukedianji = true;
                }
            },
            jiaodian() {
                // 输入框获取焦点
                var _this = this;
                if (_this.guojianumber) {
                    _this.isshowdelete = true;
                } else {
                    api.toast({
                        msg: '请先选择您的电话区号',
                        duration: 2000,
                        location: 'bottom'
                    });
                }
            },
            shijiaodian() {
                // 输入框失去焦点
                var _this = this;
                // _this.isshowdelete = false
            },
            transform: function() {
                var _this = this;
                _this.dianjiflag = false;
            },
            transforms: function() {
                var _this = this;
                _this.dianjiflag = true;
            },
            qingchu: function() {
                var _this = this;
                _this.mobile = '';
                _this.isshowdelete = false

                if (this.mobile && this.msg && this.password) {
                    $('.fourth').addClass('fourthactive');
                } else {
                    $('.fourth').removeClass('fourthactive');
                }
            },
            qing: function() {
                var _this = this;
                _this.msg = '';
            },
            submit: function() {
                var deviceId = api.deviceId;
                console.log(deviceId)
                var _this = this;
                if (M.phone(_this.mobile)) {
                    if (M.password(_this.password)) {
                        new rest().post('register').datae({
                            'mobile': _this.guojianumber + _this.mobile,
                            'password': _this.password,
                            'msg': _this.msg,
                            'device_id': deviceId,
                        }).success(function(res) {
                            console.log(JSON.stringify(res));
                            if (res.flag == 0) {
                                api.toast({
                                    msg: res.msg,
                                    duration: 2000,
                                    location: 'middle'
                                });
                            } else {
                                jiguang.bingdalias(res.msg.uid)
                                $api.setStorage('uid', res.msg.uid);
                                $api.setStorage('session', res.msg.session);
                                $api.setStorage('mobile', _this.guojianumber + _this.mobile);

                                api.toast({
                                    msg: '注册成功',
                                    duration: 2000,
                                    location: 'middle'
                                });
                                api.sendEvent({
                                    name: 'loginsuccess',
                                });
                                api.setFrameGroupIndex({
                                    name: 'group',
                                    index: 0
                                });
                                api.openWin({
                                    name: 'index',
                                    url: '../../index.html',
                                    slidBackEnabled: false,
                                    animation: {
                                        type: "fade", //动画类型（详见动画类型常量）
                                        subType: "from_right", //动画子类型（详见动画子类型常量）
                                        duration: 300 //动画过渡时间，默认300毫秒
                                    },
                                    reload: true
                                });
                                setTimeout(function() {
                                    api.closeWin();
                                }, 1000)


                            }

                        }).error(function(err) {
                            api.toast({
                                msg: err.msg,
                                duration: 2000,
                                location: 'middle'
                            });
                        }).run()
                    }
                }
            },
            countdown: function() {
                var _this = this;
                if (_this.getcount == 0) {
                    var name = document.getElementById("dao").className;
                } else if (_this.getcount == 2) {
                    var name = document.getElementById("dao1").className;
                    var firstname = name.split(' ')[0]
                    $('.' + firstname).addClass('code1')
                    $('.' + firstname).removeClass('hide')

                }
                console.log(_this.mobile)
                if (M.phone(_this.mobile)) {
                    new rest().get('fastLoginSms').datae({
                        'mobile': _this.guojianumber + _this.mobile
                    }).success(function(res) {
                        if (res.flag == 1) {
                            api.toast({
                                msg: '发送成功',
                                duration: 2000,
                                location: 'middle'
                            });
                            msgflag = true;
                            _this.daojishi(msgflag, name)
                        } else {
                            msgflag = false;
                            _this.daojishi(msgflag, name)
                            api.toast({
                                msg: res.msg,
                                duration: 2000,
                                location: 'middle'
                            });
                        }
                    }).error(function(err) {
                        api.toast({
                            msg: err.msg,
                            duration: 2000,
                            location: 'middle'
                        });
                    }).run()

                }
            },
            daojishi(msgflag, name) {
                var _this = this;
                var settime = 59;
                var timeid = null;
                var connectionType = api.connectionType;
                if (connectionType == "none") {
                    api.toast({
                        msg: '请检查网络设置',
                        duration: 2000,
                        location: 'middle'
                    });
                    return;
                }
                var firstname = name.split(' ')[0]

                if (!msgflag) {
                    //$('.' + firstname).val('获取验证码')
                } else {
                    //  var button = $('.codeactive');
                    var button = $('.' + firstname);
                    console.log(JSON.stringify(button))
                    button.val(settime + 's');
                    button.attr("disabled", true);
                    timeid = setInterval(function() {
                        settime--;
                        button.val(settime + 's');
                        if (settime <= 0) {
                            _this.getcount = 1;
                            $('.daojishi2').addClass('hide')

                            //    if($('.daojishi2').hasClass('code1')){
                            //      $('.daojishi2').removeClass('code1');
                            //    }

                            clearInterval(timeid);
                            settime = 59;
                        }
                    }, 1000)
                }

            },
            chongfamethod: function() {
                var _this = this;
                _this.getcount = 2;
                _this.countdown()
            },
        }
    })

    function yonghuxieyi() {
        api.openWin({
            name: 'yonghuxieyi',
            url: './yonghuxieyi_win.html',

        });

    }

    function Openphone() {
        api.openWin({
            name: 'arearegion',
            url: './area-region-win.html',

        });
    }
</script>

</html>
